<template>
  <div class="inLogin">
    <div class="img">Login...</div>
    <van-form validate-first @failed="onFailed">
      <!-- 通过 pattern 进行正则校验 -->
      <van-field
        label="账号"
        v-model.trim.lazy="account"
        name="pattern"
        placeholder="请输入账号"
        :rules="[
          {
            pattern: patternAct,
            required: true,
            message: '请输入6位或6位以上的账号',
          },
        ]"
      />
      <van-field
        label="密码"
        v-model.trim.lazy="password"
        name="pattern"
        placeholder="请输入密码"
        :rules="[
          {
            required: true,
            pattern: patternPwd,
            message: '请输入包含数字、字母的9位以上的密码',
          },
        ]"
      />
      <div class="login-btn">
        <van-button
          round
          block
          color="#1989fa"
          plain
          @click="clean"
          native-type="button"
        >
          清空
        </van-button>
        <van-button round block type="info" @click="getLogin">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 账号
      account: '18766666666',
      // 密码
      password: 'p123456789',
      // 验证账号的正则表达式 6位以上的数字
      patternAct: /[0-9A-Za-z]{6,}$/,
      // 验证密码的正则表达式 必须包含数字、英文字母且大于等于9位
      patternPwd: /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z]{9,}$/,
    }
  },
  created() {
    // this.getLogin()
  },
  methods: {
    onFailed(errorInfo) {
      console.log('failed', errorInfo)
    },
    clean() {
      this.account = null
      this.password = null
    },
    // 用户登录
    getLogin() {
      const data = {
        account: this.account,
        password: this.password,
      }
      this.$store
        .dispatch('LOGIN', data)
        .then(() => {
          this.$router.push('/home')
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
}
</script>

<style lang="less" scoped>
.inLogin {
  position: relative;
  height: 26.5rem;
  padding: 3.75rem 0;
  .img {
    position: absolute;
    left: 0;
    top: 0;
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 2.1rem;
    color: #1989fa;
  }
  .van-field {
    margin: 1.5rem 0;
  }
  .login-btn {
    margin: 1.25rem;
    margin-top: 3.5rem;
    display: flex;
    .van-button {
      margin: 0 0.3125rem;
    }
  }
}
</style>
